<template>
  <div>
    <MainContent title="登录页管理">
      <SearchBar inline>
        <template #normal>
          <el-form-item label="名称">
            <el-input v-model="tableForm.title" clearable placeholder="请输入名称" />
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="onSearch">查询</el-button>
            <el-button type="primary" @click="$router.push('/merchant/pageMng/addLogin')"
              v-has="['160201']">新增登录页</el-button>
          </el-form-item>
        </template>
      </SearchBar>
      <LayoutTable ref="loginStyleRef" url="/merchant/loginStyle/page" :param="tableForm">
        <el-table-column prop="title" label="名称" min-width="120"></el-table-column>

        <el-table-column prop="cover" label="图片预览" min-width="120">
          <template #default="scope">
            <div class="demo-image__preview" @click="openPromote(scope.row)"><img :src="scope.row.cover"
                style="width: 100px; height: 100px" alt=""></div>


            <!-- <div class="demo-image__preview">
              <el-image style="width: 100px; height: 100px" :src="scope.row.cover" :zoom-rate="1.2"
                :preview-src-list="[scope.row.cover]" :preview-teleported="true" fit="cover" />
            </div> -->
          </template>
        </el-table-column>

        <el-table-column prop="title" label="操作" width="120" v-has="['160102', '160103']">
          <!-- TODO  加按钮权限 -->
          <template #default="scope">
            <div>
              <el-button link type="primary" @click="toEditor(scope.row)" v-has="['160102']">
                编辑
              </el-button>
              <el-button @click="del(scope.row)" link type="primary" v-has="['160103']">删除</el-button>
            </div>
          </template>
        </el-table-column>
      </LayoutTable>
    </MainContent>
    <Dialog :model-value="promoteVisible" title="扫码预览" :width="500" @close="promoteVisible = false">
      <div class="qrcode-container">
        <qrcode-vue :value="pageLink" :size="200" level="H" />
        <div class="tips">
          <div>手机扫左边二维码预览</div>
          <div>
            你也可以打开
            <a :href="pageLink" target="_blank">新窗口预览</a>
          </div>
        </div>
      </div>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="copyItemUrl">复制链接</el-button>
          <el-button type="primary" @click="promoteVisible = false">关闭</el-button>
        </span>
      </template>
    </Dialog>
  </div>
</template>

<script lang="ts" setup>
import { delLoginTemplateApi } from "@/api/activity";
import QrcodeVue from "qrcode.vue";

const promoteVisible = ref(false)
const pageLink = ref('');
const copyItemUrl = () => {
  let oInput = document.createElement("input");
  // 将想要复制的值
  oInput.value = pageLink.value;
  // 页面底部追加输入框
  document.body.appendChild(oInput);
  // 选中输入框
  oInput.select();
  // 执行浏览器复制命令
  document.execCommand("Copy");
  // 复制后移除输入框
  ElMessage({
    showClose: true,
    message: "复制成功",
    type: "success",
  });
  oInput.remove();
};

const openPromote = (row: any) => {
  promoteVisible.value = true
  pageLink.value = row.cover
}

const Router = useRouter(),
  Store = useStore();
const loginStyleRef = ref();
const tableForm = ref({
  currentPage: "",
  showCount: "",
  title: "",
});

const toEditor = (row: any) => {
  Router.push(`/merchant/pageMng/addLogin/${row.id}`);
};
const del = (row: any) => {
  ElMessageBox.confirm(`是否删除【${row.title}】`, "提示", {
    confirmButtonText: "确认",
    cancelButtonText: "取消",
    type: "warning",
  }).then(async () => {
    let rs = await delLoginTemplateApi({ id: row.id });
    if (rs.code === 200) {
      ElMessage.success("删除成功");
      onSearch();
    }
  });
};
const onSearch = () => {
  loginStyleRef.value.search();
};
// 监听机构
const insId = computed(() => {
  return Store.state.insId.insId;
});
watch(
  () => insId,
  async () => {
    onSearch();
  },
  {
    deep: true,
  }
);
</script>
<style lang="scss" scoped>
.qrcode-container {
  display: flex;
  align-items: center;
  justify-content: center;

  .tips {
    color: #666666;
    margin-left: 20px;
    font-size: 14px;

    div {
      &+div {
        margin-top: 10px;
      }
    }

    a {
      color: var(--el-color-primary);
    }
  }
}

.demo-image__error .image-slot {
  font-size: 30px;
}

.demo-image__error .image-slot .el-icon {
  font-size: 30px;
}

.demo-image__error .el-image {
  width: 100%;
  height: 200px;
}
</style>
